import React,{useState,useMemo,useCallback,memo} from 'react';

function Foo(){
    const [count,setCount] = useState(0);

    const [username,setUsername] = useState('li');

    const add = () =>{
        setCount(prev => prev+1);
        
    }

    let dobule = useMemo(() => count * 2,[count]);
    
    console.log("====Foo=")

    const change = () => {
        setUsername("ZS")
    }

    // const minus = useMemo(() => {
    //     return () => {
    //         console.log("===")
    //     }
    // },[])

    const minus = useCallback(() => {
        console.log("===")
    },[])

    
    return <div>
        <Child username={username}></Child>
        <button onClick={add}>add</button>
        <Counter  count={dobule} minus={minus}/>
        <button onClick={change}>CHANGE</button>
    </div>
}

function Child(props){
    console.log("===child")
    return <div>
        {props.username}
    </div>
}


const Counter = memo(function(props){
    console.log("===count")
    return <div>
        {props.count}
    </div>
})

export default Foo